<template>
  <div class="search_container">
    <div class="search_nav_tab">
      <form action="/">
        <van-search
          v-model="value"
          show-action
          autofocus
          placeholder="一款比数学题还难的游戏？"
          @keydown.enter="onSearch"
          @input="onInput"
        />
      </form>
    </div>

    <div v-show="isHistory" class="wrapper">
      <div class="search_wrapper">
        <p class="search_p">
          大家都在搜
          <span class="iconfont icon-shanchu2"></span>
        </p>
        <div class="search_hot">
          <p v-for="(item,index) in kw" :key="index">{{item}}</p>
        </div>
      </div>

      <div class="search_history">
        <p class="search_history_p">历史搜索</p>
        <div class="search_hot">
          <p v-for="(item,index) in history" :key="index">{{item}}</p>
        </div>
      </div>
    </div>

    <div v-show="isMind" class="search_mind">
      <p v-for="(item,index) in mind" :key="index" v-html="item"></p>
    </div>

  </div>
</template>

<script>
import REM from "../utills/rem";
export default {
  data() {
    return {
      value: "",
      isHistory: true,
      isMind: false
    };
  },
  mounted() {
    REM.Rem();
  },
  computed: {
    history: function() {
      return this.$store.state.history;
    },
    kw: function() {
      return this.$store.state.kw;
    },
    mind: function() {
      var empty = [];
      this.$store.state.mind.forEach(ele => {
        if (ele.includes(this.value)) {
          ele = ele.replace(
            this.value,
            `<font style="color:red">${this.value}</font>`
          );
          empty.push(ele);
        }
      });
      return empty;
    }
  },
  methods: {
    //回车进行搜索
    onSearch() {
      this.$store.dispatch("changeHistory", this.value);
      this.value = "";
      this.isMind = false;

    },
    //当输入框发生变化时执行得操作
    onInput() {
      console.log(this.value);
      if (this.value.length === 0) {
        this.isHistory = true;
        this.isMind = false;
      } else {
        this.$store.dispatch("Kw", this.value);
        this.isHistory = false;
        this.isMind = true;
      }
    }
  }
};
</script>

<style scoped>
.search_container {
  width: 100%;
  background-color: #f4f4f4;
  font-size: 0.25rem;
}
.search_nav_tab {
  width: 100%;
  border-bottom: 1px solid lightgrey;
}
.search_wrapper {
  width: 100%;
  box-sizing: border-box;
  padding: 0.15rem;
  background-color: #fff;
}
.search_p {
  display: flex;
  justify-content: space-between;
  align-items: center;
  color: #999999;
  font-size: 0.21rem;
}
.search_hot {
  width: 100%;
  /* border: 1px solid red; */
  margin-top: 0.15rem;
  display: flex;
  flex-wrap: wrap;
  justify-content: start;
}
.search_hot p {
  padding: 0.05rem 0.15rem;
  border: 1px solid #999;
  border-radius: 0.25rem;
  font-size: 0.2rem;
  margin: 0.08rem;
}
.search_history {
  width: 100%;
  /* border: 1px solid red; */
  margin-top: 0.15rem;
  background-color: #fff;
  font-size: 0.21rem;
  box-sizing: border-box;
  padding: 0.15rem;
}
.search_history_p {
  color: #999;
}
.search_mind {
  width: 95%;
  margin-left: 5%;
  background-color: #fff;
}
.search_mind p {
  width: 100%;
  height: 40px;
  line-height: 40px;
}
</style>